<template>
  <!-- 整体布局容器，使用TailwindCSS设置背景色和最小高度 -->
  <div class="bg-gray-50 min-h-[1024px]">
    <!-- 主内容容器，固定宽度并居中 -->
    <div class="flex w-[1440px] mx-auto">
      <!-- 右侧主内容区 -->
      <main class="flex-1 p-8 bg-gray-50">
        <!-- 用户信息卡片 -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
          <div class="flex justify-between items-start mb-6">
            <!-- 用户头像和信息 -->
            <div class="flex items-start gap-6">
              <img :src="userAvatar" class="w-[100px] h-[100px] rounded-full object-cover" alt="捐赠者头像" />
              <div>
                <h1 class="text-2xl font-bold mb-2">{{ userName }}</h1>
                <p class="text-gray-600">{{ userRole }}</p>
              </div>
            </div>
            <!-- 操作按钮组 -->
            <div class="flex gap-4">
              <a-button type="primary" class="!rounded-button" @click="handleOrder">
                <template #icon><ShoppingCartOutlined /></template>
                订购冷冻卵子
              </a-button>
              <a-button class="!rounded-button" @click="handleCollect">
                <template #icon><HeartOutlined /></template>
                收藏
              </a-button>
              <a-button class="!rounded-button" @click="handleBack">
                <template #icon><ArrowLeftOutlined /></template>
                返回搜索
              </a-button>
            </div>
          </div>

          <!-- 标签页导航 -->
          <div class="border-b border-gray-200">
            <a-tabs v-model:activeKey="activeTab">
              <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.label" />
            </a-tabs>
          </div>
        </div>

        <!-- 用户档案详情区域 -->
        <div class="space-y-6">
          <div class="bg-white rounded-lg shadow-sm p-6">
            <!-- 档案详情表格 -->
            <table class="w-full border-collapse">
              <tbody>
                <!-- 第一行：显示前4个部分 -->
                <tr>
                  <td v-for="(section, index) in profileSections.slice(0, 4)" :key="index" class="border p-4 w-1/4 align-top">
                    <h3 class="text-lg font-bold mb-2">{{ section.title }}</h3>
                    <div class="space-y-2">
                      <p v-for="(item, idx) in section.items" :key="idx">
                        <span class="text-gray-500">{{ item.label }}：</span>
                        {{ item.value }}
                      </p>
                    </div>
                  </td>
                </tr>
                <!-- 第二行：显示剩余部分 -->
                <tr>
                  <td v-for="(section, index) in profileSections.slice(4)" :key="index + 4" class="border p-4 align-top">
                    <h3 class="text-lg font-bold mb-2">{{ section.title }}</h3>
                    <div class="space-y-2">
                      <!-- 特殊处理家族遗传史部分 -->
                      <template v-if="section.title === '家族遗传史'">
                        <p class="text-gray-500">父母：</p>
                        <p class="ml-2">父亲：172cm/68kg，水电工</p>
                        <p class="ml-2">母亲：155cm/42kg，理财经理</p>
                        <p class="mt-2">祖辈：均已去世，无重大遗传病史记录</p>
                      </template>
                      <template v-else>
                        <p v-for="(item, idx) in section.items" :key="idx">
                          <span v-if="item.label" class="text-gray-500"> {{ item.label }}： </span>
                          {{ item.value }}
                        </p>
                      </template>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- 联系按钮区域 -->
        <div class="bg-white rounded-lg shadow-sm p-6 text-center">
          <h2 class="text-xl font-bold mb-4">联系国际卵精库</h2>
          <a-button type="primary" class="!rounded-button" @click="handleContact">
            <template #icon><PhoneOutlined /></template>
            立即联系
          </a-button>
        </div>
      </main>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
// 导入Ant Design图标组件
import {
  HomeOutlined,
  VideoCameraOutlined,
  AudioOutlined,
  HeartOutlined,
  HistoryOutlined,
  UserOutlined,
  ShoppingCartOutlined,
  ArrowLeftOutlined,
  PhoneOutlined
} from '@ant-design/icons-vue';

// 响应式数据
const currentMenu = ref('home'); // 当前选中的菜单项
const activeTab = ref('profile'); // 当前激活的标签页

// 左侧菜单配置
const menuItems = [
  { key: 'home', label: '个人中心', icon: HomeOutlined },
  { key: 'video', label: '视频匹配', icon: VideoCameraOutlined },
  { key: 'audio', label: '语音匹配', icon: AudioOutlined },
  { key: 'favorites', label: '收藏夹', icon: HeartOutlined },
  { key: 'history', label: '最近查看', icon: HistoryOutlined },
  { key: 'profile', label: '修改个人资料', icon: UserOutlined }
];

// 顶部标签页配置
const tabs = [
  { key: 'overview', label: '总览' },
  { key: 'profile', label: '个人档案' },
  { key: 'gene', label: '基因报告' },
  { key: 'video', label: '视频资料' },
  { key: 'photo', label: '图片资料' }
];

// 用户信息
const userName = '捐赠者 1135';
const userRole = '冷冻卵子库存';
const userAvatar = 'https://ai-public.mastergo.com/ai/img_res/0a93502bb23cc4e912a9089837a5387b.jpg';

// 用户档案数据
const profileSections = [
  {
    title: '基础信息',
    items: [
      { label: '婚姻状况', value: '已婚' },
      { label: '种族', value: '亚裔（华裔）' },
      { label: '吸烟史', value: '无' },
      { label: '居住地', value: '中国台湾地区' }
    ]
  },
  {
    title: '医疗史',
    items: [
      { label: '月经周期', value: '规律（初潮12岁，周期30天）' },
      { label: '妊娠史', value: '无怀孕/流产/分娩记录' },
      { label: '传染病史', value: '无性传播疾病、肝炎、HIV等' },
      { label: '手术史', value: '无重大手术或住院记录' },
      { label: '过敏史', value: '无' }
    ]
  },
  {
    title: '身体特征',
    items: [
      { label: '血型', value: 'O型阳性' },
      { label: '身高/体重', value: '163cm/47.2kg' },
      { label: '眼睛/发色', value: '棕色/黑色' },
      { label: '视力/牙齿', value: '优（无矫正需求）' }
    ]
  },
  {
    title: '教育背景',
    items: [
      { label: '最高学历', value: '大学（美发设计系，GPA 3.7）' },
      { label: '语言能力', value: '中文/闽南语（母语）、英语（基础）' },
      { label: '特长', value: '数学、绘画、滑冰、手工艺' }
    ]
  },
  {
    title: '职业与动机',
    items: [
      { label: '现任职业', value: '头皮护理讲师（2017年至今）' },
      { label: '捐赠动机', value: '帮助准父母获得健康宝宝' },
      { label: '个人目标', value: '成为营销活动策划师' }
    ]
  },
  {
    title: '家族遗传史',
    items: [] // 特殊处理，使用template单独渲染
  },
  {
    title: '疾病筛查',
    items: [{ value: '无心血管、血液、神经系统等遗传性疾病' }, { value: '无精神疾病或染色体异常史' }]
  },
  {
    title: '生活习惯',
    items: [
      { label: '饮食', value: '偏好蔬菜/甜食' },
      { label: '运动', value: '每周3-5次' },
      { label: '咖啡因', value: '每日1杯' }
    ]
  }
];

/**
 * 处理订购按钮点击事件
 */
const handleOrder = () => {
  console.log('订购冷冻卵子');
  // 这里可以添加订购逻辑
};

/**
 * 处理收藏按钮点击事件
 */
const handleCollect = () => {
  console.log('收藏捐赠者');
  // 这里可以添加收藏逻辑
};

/**
 * 处理返回按钮点击事件
 */
const handleBack = () => {
  console.log('返回搜索页面');
  // 这里可以添加返回逻辑
};

/**
 * 处理联系按钮点击事件
 */
const handleContact = () => {
  console.log('联系国际卵精库');
  // 这里可以添加联系逻辑
};
</script>

<style scoped>
/* 深度选择器修改Ant Design Tabs组件默认样式 */
:deep(.ant-tabs-nav) {
  margin: 0; /* 移除默认外边距 */
}

:deep(.ant-tabs-nav::before) {
  border: none; /* 移除底部边框 */
}

:deep(.ant-tabs-tab) {
  padding: 12px 0; /* 调整标签页内边距 */
  margin: 0 32px 0 0; /* 调整标签页外边距 */
}

/* 标签页指示条样式 */
:deep(.ant-tabs-ink-bar) {
  height: 2px; /* 设置高度 */
  background: #2563eb; /* 设置颜色 */
}

/* 激活标签页文字颜色 */
:deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
  color: #2563eb !important; /* 设置激活状态颜色 */
}

/* 自定义圆角按钮类 */
.rounded-button {
  border-radius: 6px;
}
</style>
